<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <vm-common-search-view
      type="businessTransaction"></vm-common-search-view>
    <div class="vm-common-item-list">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
                   :autoFill="false">
        <ul class="content">
          <router-link 
          :to="'/common_details/' + item.bid + '/公告详情?btn=myoffer'" 
          v-for="(item,key) in myOfferData" 
          :key="key"
          tag="li" 
          class="common-item-box">
            <div class="idx-warp-l">
              <img src="../../../static/images/vm-common-ltem-list.png" alt="">
            </div>
            <div class="idx-warp-r">
              <div class="idx-r-t">
                <span class="t-content">{{ item.cIBidsTatle }}</span>
                <span class="t-time">{{ item.dCenterDate }}</span>
              </div>
              <div class="idx-r-f">
                <span class="f-area">单位：{{ item.companyName }}</span>
                <span :class="['f-type']">阶段：{{ item.iRangeStatus }}</span>
              </div>
            </div>
          </router-link>
        </ul>
        <vm-common-noData v-if="!myOfferData.length"></vm-common-noData>
      </mt-loadmore>
    </div>

  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header' // header 组件
  import vmCommonSearchView from '@/components/vm-common-search-view' // 搜索组件
  import {transactionIndex} from '@/api/businessTransctionCenter.js'

  export default {
    data() {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        allLoaded: false,
        myOfferData: new Array(),
        myOfferPage: 1
      }
    },
    created() {
      this.getMyOfferData(true);
    },
    methods: {
      getMyOfferData(reset, loadmoreType) {
        transactionIndex(this.myOfferPage, 0).then(res => {
          if (!res.data.data.length) {
            this.allLoaded = true;
            if (loadmoreType == 'top') {
              this.$refs.loadmore.onTopLoaded();
            } else {
              this.$refs.loadmore.onBottomLoaded();
            }
          }
          if (reset) {
            this.myOfferData = res.data.data;
            this.$refs.loadmore.onTopLoaded();
            return;
          }
          this.myOfferData = this.myOfferData.concat(res.data.data)
          this.$refs.loadmore.onBottomLoaded();
        });
      },
      loadTop() {
        this.myOfferPage = 1;
        this.allLoaded = false;
        this.getMyOfferData(true, 'top');
      },
      loadBottom() {
        this.myOfferPage++;
        this.getMyOfferData(false, 'bottom');

      }
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-search-view': vmCommonSearchView,
    }
  }
</script>

<style scoped lang="scss">
  .vm-common-item-list {
    margin-top: 30px;
    overflow: scroll;
    height: calc(100% - 100px);
    .idx-warp-l {
      background: url("../../../static/images/vm-common-ltem-list.png") no-repeat;
      background-size: cover;
      width: 60px !important;
      height: 60px !important;
    }
  }
</style>
